<template>
  <div class="test-options-meta-container">
    <h1>defineOptions + meta测试页面</h1>
    <p>此页面用于测试使用defineOptions的meta方式定义路由配置</p>

    <el-alert
      title="路由定义差异"
      type="warning"
      description="本页面使用defineOptions中的meta属性而非route属性来定义路由配置"
      show-icon
    />

    <el-divider />

    <p>测试代码：</p>
    <pre>
defineOptions({
  name: 'TestOptionsMeta',
  // 不使用route属性，而是直接使用meta
  meta: {
    title: 'Meta路由配置',
    icon: 'setting',
    orderNo: 10
  }
});
    </pre>

    <el-button type="primary" @click="goToHome"> 返回首页 </el-button>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';

  // 使用defineOptions定义组件选项
  defineOptions({
    name: 'TestOptionsMeta',
    // 不使用route属性，而是直接使用meta
    meta: {
      title: 'Meta路由配置',
      icon: 'setting',
      orderNo: 10,
    },
  });

  const router = useRouter();

  const goToHome = () => {
    router.push('/');
  };
</script>

<style scoped lang="scss">
  .test-options-meta-container {
    padding: 20px;

    pre {
      margin: 15px 0;
      padding: 15px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      background-color: #f8f8f8;
    }

    .el-button {
      margin-top: 15px;
    }
  }
</style>
